<template>
  <div class="left-container" :class="{ 'no-parent': !allParentNode.length }">
    <!-- 暂时去掉面包屑 -->
    <!-- <transition name="fade-slide" appear mode="out-in">
      <div class="parent-node" v-if="allParentNode.length">
        <el-breadcrumb :separator-icon="ArrowRight">
          <transition-group name="fade-slide">
            <el-breadcrumb-item
              v-for="node in allParentNode"
              :key="node.id"
              @click="clickBreadcrumb(node)"
            >
              {{ node.name }}
            </el-breadcrumb-item>
          </transition-group>
        </el-breadcrumb>
      </div>
    </transition> -->
    <div class="knowledge-point">
      <div class="title" style="font-weight: 700">
        <div v-if="showClose" @click="emit('close')" class="btn-back"></div>
        知识点：{{ sidebarData?.name }}
      </div>
      <div class="knowledge-point-content">
        <div class="item get-score-rate">
          <template v-if="curCount(sidebarData)">
            <div>
              正确率：
              <span class="item-value">
                {{ (curRate(sidebarData) * 100).toFixed(2) }}%
              </span>
            </div>
            <el-progress :percentage="scoreRateProgress" :show-text="false" />
            <div style="color: #333" v-if="isCompare">
              {{ '年级平均：'
              }}{{ (sidebarData?.grade_rate * 100).toFixed(2) }}%
            </div>
          </template>
          <template v-else
            ><span style="color: #ccc; text-align: center"
              >暂无数据</span
            ></template
          >
        </div>

        <div class="item question-count">
          <template v-if="curCount(sidebarData)">
            <div>
              习题量：
              <span class="item-value">{{ curCount(sidebarData) }}道</span>
            </div>
            <el-progress
              :percentage="questionCountProgress"
              :show-text="false"
            />
            <div v-if="isCompare">
              {{ '年级总量：' }}{{ sidebarData?.grade_count }}道
            </div>
          </template>
          <template v-else
            ><span style="color: #ccc; text-align: center"
              >暂无数据</span
            ></template
          >
        </div>
      </div>
    </div>
    <div @click="toggleExpanded" class="expand-toggle">
      正确率详情
      <i class="icon-down" :class="{ expanded: expanded }"></i>
    </div>
    <template v-if="expanded">
      <div class="distribute">
        <div class="sub-title">
          <div class="text">任务分配正确率</div>
          <el-popover placement="bottom-start" trigger="hover" width="15vw">
            <template #reference>
              <div class="icon"></div>
            </template>
            <template #default>
              <div class="content">
                <p>自主练习的题目只做参考，不纳入知识图谱的统计。</p>
                <p>作：指数智作业作业数据采集</p>
                <p>考：指考试阅卷的考试数据</p>
                <p>练：是指老师发布的任务学和靶向练</p>
                <p>习题量：对重复题目进行去重</p>
              </div>
            </template>
          </el-popover>
        </div>
        <div class="distribute-content">
          <template v-if="sidebarData?.task_info?.length > 0">
            <div
              v-for="task in sidebarData?.task_info"
              :key="task?.task_from"
              class="distribute-item"
            >
              <div class="count-box">
                <div
                  class="icon"
                  :style="{
                    backgroundColor:
                      task?.task_from !== 4 ? '#D46262' : '#D9D9D9'
                  }"
                >
                  {{ taskMap[task?.task_from] }}
                </div>
                <span class="count">{{ curCount(task) }}道</span>
              </div>
              <div
                class="value"
                :style="{
                  color:
                    task?.task_from !== 4
                      ? getColorByRate(curRate(task))
                      : '#D9D9D9'
                }"
              >
                {{
                  curCount(task)
                    ? `${(curRate(task) * 100).toFixed(2)}%`
                    : '— —'
                }}
              </div>
            </div>
          </template>
          <template v-else>
            <div
              v-for="(task, index) in Array(4)"
              :key="index"
              class="distribute-item"
            >
              <div class="count-box">
                <div class="icon">{{ taskMap[index + 1] }}</div>
                <span class="count">{{ 0 }}道</span>
              </div>
              <div class="value">--</div>
            </div>
          </template>
        </div>
      </div>
      <div class="sub-knowledge-point" v-if="sidebarData?.children?.length > 0">
        <div class="sub-title">子知识点正确率</div>
        <div class="sub-knowledge-content">
          <div
            v-for="detail in sidebarData?.children"
            :key="detail.id"
            class="sub-content"
            @click="changeDetail(detail)"
          >
            <div class="question-title">
              <div
                class="icon"
                :style="{
                  backgroundColor: getColorByRate(curRate(detail))
                }"
              ></div>
              <div class="text">{{ detail?.name }}</div>
            </div>
            <div class="info">
              <div class="score-rate">
                正确率：<span
                  :style="{
                    color: getColorByRate(curRate(detail))
                  }"
                  >{{ (curRate(detail) * 100).toFixed(2) }}%</span
                >
              </div>
              <div class="info-count">习题量：{{ curCount(detail) }}道</div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <StudentStatus
      :knowledgeInfo
      :classId="classId"
      :currentGradeNum="currentGradeNum"
      :subjectId="subjectId"
      :knowledgeId="sidebarData?.id"
      :selectTime="selectTime"
      :count="curCount(sidebarData)"
      @toDetail="toDetail"
    />
    <div v-if="showDetail" class="to-detail">
      <transition name="fade-slide" mode="out-in">
        <div class="selected-num" v-if="selectedStudent.length">
          已选择
          <span style="font-weight: 700">{{ selectedStudent.length }}</span>
          名学生
        </div>
      </transition>
      <div v-if="!selectedStudent.length"></div>
      <button @click="toDetail" class="btn-detail">靶向提升</button>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, defineModel, onBeforeUnmount, watch } from 'vue'

import { useRoute } from 'vue-router'
import StudentStatus from './StudentStatus.vue'
import { taskMap } from '../data'
import { getColorByRate } from '@/views/target-boost/utils'

import { storeToRefs } from 'pinia'
import { useKnowledgeStore } from '@/stores/knowledge-store'
// 这个toDetail是一层一层传  开发时间紧
const emit = defineEmits(['close', 'toDetail'])

defineProps({
  showClose: Boolean,
  showDetail: Boolean,
  selectTime: Array,
  classId: String,
  currentGradeNum: Number,
  subjectId: Number,
  isCompare: Boolean
})

const route = useRoute()

const sidebarData = defineModel('sidebarData')
const { allParentNode, selectedStudent } = storeToRefs(useKnowledgeStore())

const knowledgeInfo = computed(() => {
  return {
    rate: curRate(sidebarData.value) * 100,
    count: curCount(sidebarData.value)
  }
})

const curRate = node => {
  console.log(node)

  return route.query.studentId ? node.personal_rate : node.class_rate
}
const curCount = node => {
  return route.query.studentId ? node.personal_count : node.class_count
}

const knowledgeStore = useKnowledgeStore()

watch(sidebarData, () => {
  // 当detailData变化时，清空选中的学生
  knowledgeStore.setSelectedStudent([])
})

// 组件销毁时，清空选中的学生
onBeforeUnmount(() => {
  if (selectedStudent.value.length) {
    knowledgeStore.setSelectedStudent([])
  }
})
// 暂时去掉面包屑
// const clickBreadcrumb = node => {
//   // 查找到点击的节点，删除点击的当前节点后的所有节点
//   allParentNode.value.findIndex((item, i) => {
//     if (item.id === node.id) {
//       sidebarData.value = JSON.parse(JSON.stringify(item))
//       props.changeChart()
//       // knowledgeStore.setKnowledgeTree(item)
//       allParentNode.value.splice(i)
//       return true
//     }
//   })
// }

// 计算正确率进度条
const scoreRateProgress = computed(() => {
  const rate = route.query.studentId
    ? sidebarData.value?.personal_rate
    : sidebarData.value?.class_rate
  const result = +(rate * 100).toFixed(2)
  if (isNaN(result) || !result) {
    return 0
  }
  return result
})

// 计算习题量进度条
const questionCountProgress = computed(() => {
  const result = +(
    (curCount(sidebarData?.value) / sidebarData?.value?.grade_count) *
    100
  ).toFixed(2)
  if (isNaN(result) || result === 0) {
    return 0
  }
  return result
})

const changeDetail = detail => {
  const newData = JSON.parse(JSON.stringify(detail))
  sidebarData.value = newData
  knowledgeStore.setKnowledgeTree(newData)
}

const expanded = ref(false)

function toggleExpanded() {
  expanded.value = !expanded.value
}

const toDetail = (_, record) => {
  console.log(111)
  knowledgeStore.setKnowledgeTree(sidebarData.value)
  console.log(record)
  emit('toDetail', record)
}
</script>
<!-- eslint-disable-next-line -->
<style lang="less">
.content {
  font-size: 14px;
  p {
    line-height: 2;
  }
}
</style>

<style lang="less" scoped>
.left-container {
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  min-height: 90vh;
  width: 100%;
  background-color: #fff;
  padding: 0 20px 0 20px;
  box-shadow: 0 0 0 0 rgb(0 0 0 / 0.03);

  &.no-parent {
    padding-top: 0px;
  }

  .parent-node {
    position: absolute;
    padding-top: 20px;
    :deep(.el-breadcrumb__inner) {
      font-size: 16px;
      color: #000;
      font-weight: 500;
      cursor: pointer;
    }
  }

  .title,
  .sub-title {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 18px;
    padding: 20px 0;
    .mark-icon {
      font-size: 12px;
      color: #a1a1a1;
    }
    .icon {
      position: absolute;
      right: 0;
      width: 16px;
      height: 16px;
      line-height: 16px;
      background: url('@/assets/images/target-boost/question-filled.svg?url')
        no-repeat center center;
      background-size: 100% 100%;
      margin-right: 5px;
    }
  }
  .sub-title {
    &::before {
      content: '';
      display: inline-block;
      width: 5px;
      height: 18px;
      line-height: 18px;
      background-color: @color-brand-regular;
      margin-right: 5px;
    }
  }

  .btn-back {
    margin-right: 10px;
    width: 16px;
    height: 14px;
    background-image: url(@/assets/images/target-boost/icon-back.svg);
    background-size: cover;
    cursor: pointer;
  }
  .to-detail {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    background-color: #fff;
    box-shadow: inset 0 1px #f0f0f0;
    line-height: 60px;
    text-align: right;
    z-index: 100;
    .btn-detail {
      border: 0;
      padding: 0 12px;
      background-color: @theme-color;
      line-height: 2;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
    }
  }
}

.knowledge-point {
  .title {
    display: flex;
    justify-content: start;
  }

  .knowledge-point-content {
    display: flex;
    justify-content: space-between;
    gap: 13px;

    .item {
      border: 1px solid rgba(0, 0, 0, 0.04);
      width: 170px;
      height: 100px;
    }

    .get-score-rate,
    .question-count {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      box-sizing: border-box;
      background-color: #fafafa;
      padding: 0 10px;

      .item-value {
        font-size: 16px;
        color: @theme-color;
      }
    }
  }
}

.expand-toggle {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: @theme-color;
  cursor: pointer;

  .icon-down {
    margin-left: 8px;
    width: 16px;
    height: 16px;
    background-image: url(@/assets/images/target-boost/i-arrow-down.png);
    background-size: cover;

    &.expanded {
      transform: rotate(180deg);
    }
  }
}

.distribute {
  .distribute-content {
    display: flex;
    justify-content: space-between;

    .distribute-item {
      .count-box {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        width: 80px;
        margin-bottom: 10px;

        .icon {
          width: 20px;
          height: 20px;
          line-height: 20px;
          font-size: 13px;
          text-align: center;
          background-color: #fd6f73;
          border-radius: 50%;
          color: #fff;
        }
      }

      .value {
        font-size: 18px;
        text-align: center;
      }
    }
  }
}

.sub-knowledge-point {
  .sub-knowledge-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 23px;

    .sub-content {
      display: flex;
      flex-direction: column;
      gap: 5px;
      border-bottom: 1px solid #f0f0f0;
      cursor: pointer;

      .question-title {
        display: flex;
        align-items: center;
        height: 20px;

        .icon {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #37ecab;
          margin: 0 6px;
        }
      }

      .info {
        display: flex;
        justify-content: space-between;
        margin: 0 10px 14px 20px;
      }
    }
  }
}
</style>
